<template>
  <div class="alarmConfiguration zy-content">
    <!-- 仓位储位 -->
    <!--    <search :columns="searchData" @getSearch="getSearch(arguments)"></search>-->
    <div class="alarmConfiguration">
      <div class="list-layout mt16">
        <!-- 表格 -->
        <!--        <div class="btns clear">-->
        <!--          <span class="title">{{ $t("common.listInformation") }}</span>-->
        <!--        </div>-->
        <div class="tableContent flexTable">
          <div class="table-div-body" style="width: 25%;border-right:1px solid #f4f0f0;padding-right: 5px">
            <div class="btns clear">
              <span class="title">
<!--                {{ $t("common.warehouseTitle") }}-->
              仓库管理
              </span>
              <Button @click="handleAdd">
                新增
              </Button>
            </div>
            <!--            仓位管理表-->
            <div class="wareTree" :style="{ height: tableHeight + 'px' }">
              <div v-for="(item,index) of wareList" :key="index" class="wareLoop" @click="handleRowClick(item)"
                   :style="{ backgroundColor: rowInfo.id === item.id ? '#E0EAF9' : '' }">
                <div class="wareBody">
                  <div class="wareName"> {{ item.warehouseName }}
                  </div>
                  <div class="wareBtnView">
                    <Button type="info" ghost icon="ios-create" @click.stop="handleEditRow(item)"
                            style="margin-right: 5px"></Button>
                    <Button type="error" ghost icon="md-trash" @click.stop="handleDeleteRow(item)"></Button>
                  </div>
                </div>
              </div>
            </div>

            <!--            <Table class="resizable-table" border @on-column-width-resize="onColumnWidthResize" :columns="columns"-->
            <!--                   :height="tableHeight"-->
            <!--                   :highlight-row="true"-->
            <!--                   @on-row-click="handleRowClick"-->
            <!--                   ellipsis ref="selection" stripe :data="wareList">-->
            <!--              <template slot-scope="{ row }" slot="action">-->
            <!--            <span class="operationBtn" @click="handleEditRow(row)"-->
            <!--            ><i class="iconfont zy-common-bianji"></i>编辑</span-->
            <!--            >-->

            <!--                <span class="operationBtn" @click="handleDeleteRow(row)"-->
            <!--                ><i class="iconfont zy-common-shanchu"></i>删除</span-->
            <!--                >-->
            <!--              </template>-->
            <!--            </Table>-->
          </div>
          <!--储位管理表-->
          <div class="table-div-body" style="margin-left: 8px;width: 75%">
            <div class="btns clear">
              <span class="title">
<!--                {{ $t("common.storageTitle") }}-->
                储位管理
              </span>
              <Button @click="handleAddStorage">
                新增
              </Button>
            </div>

            <Table class="resizable-table" border @on-column-width-resize="onColumnWidthResize"
                   :columns="columns1" :height="tableHeight"
                   ellipsis ref="selection" stripe :data="storageList">
              <template slot-scope="{ row }" slot="action">
            <span class="operationBtn" @click="handleEditRowStorage(row)"
            ><i class="iconfont zy-common-bianji"></i>编辑</span
            >

                <span class="operationBtn" @click="handleDeleteRowStorage(row)"
                ><i class="iconfont zy-common-shanchu"></i>删除</span
                >
              </template>
            </Table>
            <div class="pageWrap mt16">
              <Page :total="total" :page-size="pageSize" :page-size-opts="pageSizeOption" :current="pageNum"
                    @on-change="changePageNum" @on-page-size-change="changePageSize" show-sizer show-total/>
            </div>
          </div>
        </div>
      </div>
    </div>
    <Modal
        :mask-closable="false"
        v-model="deleteShow"
        title="删除"
        class="modal-title-layout"
    >
      <div class="icon red">
        <i class="iconfont zy-common-shanchu"></i>
      </div>
      <p class="title">
        <span>是否确认删除?</span>
      </p>
      <div slot="footer">
        <Button type="default" @click="deleteShow = false">取消</Button>
        <Button type="primary" @click="handleDeleteSure">确定</Button>
      </div>
    </Modal>
    <Modal
        :mask-closable="false"
        v-model="deleteShowStorage"
        title="删除"
        class="modal-title-layout"
    >
      <div class="icon red">
        <i class="iconfont zy-common-shanchu"></i>
      </div>
      <p class="title">
        <span>是否确认删除?</span>
      </p>
      <div slot="footer">
        <Button type="default" @click="deleteShowStorage = false">取消</Button>
        <Button type="primary" @click="handleDeleteSureStorage">确定</Button>
      </div>
    </Modal>
    <CreateOrUpdateModal
        :visible="createStatus"
        :form="wareForm"
        :title="wareForm.id ? '编辑' : '新增'"
        :handleAddSubmit="handleAddSubmit"
        :closeSubmit="closeSubmit"
        :typeList="typeList"
    />

    <CreateOrUpdateModalStorage
        :visible="storageCreateStatus"
        :form="storageForm"
        :title="storageForm.id ? '编辑' : '新增'"
        :handleAddSubmit="handleAddSubmitStorages"
        :closeSubmit="closeSubmitStorages"
        :typeList="typeList"
        :warehouseList="wareCodeList"
    ></CreateOrUpdateModalStorage>
  </div>
</template>
<script>

import {
  getWare
} from "@/api/stock/stock.js";
import search from "@/components/curd/searchList.vue";
import toggleTableOperation from "@/mixins/toggleTableOperation";
import CreateOrUpdateModal from "./modal_open.vue";
import CreateOrUpdateModalStorage from "./modal_openStorage.vue";

export default {
  name: "stockData", //仓库配置
  components: {search, CreateOrUpdateModalStorage, CreateOrUpdateModal},
  mixins: [toggleTableOperation],
  data() {
    return {
      rowWarehouseCode: 12,
      pageSearch: {
        current: 1,
        pageSize: 10
      },
      rowInfo: {},//左侧单击行数据
      currentItem: {},
      deleteShow: false,
      deleteShowStorage: false,
      wareCodeList: [],
      wareList: [],
      storageList: [],
      wareForm: {},
      storageForm: {},
      createStatus: false,
      storageCreateStatus: false,
      //一级搜索
      searchData: [
        {
          title: "储位名称",
          key: "storageName",
        },
        {
          title: "储位编码",
          key: "storageCode"
        },
      ],
      //一级table配置
      columns: [
        // {
        //   key: "selection",
        //   type: "selection",
        //   width: 60,
        //   align: "center",
        //   fixed: 'left'
        // },
        {
          title: '序号',
          width: 80,
          align: 'center',
          render: (h, params) => {
            return h('span', params.index + (this.pageNum - 1) * this.pageSize + 1);
          },
        },
        {
          title: "仓位名称",
          key: "warehouseName",
          minWidth: 150,
          resizable: true,
          align: "center",
        },
        {
          title: "仓位编码",
          key: "warehouseCode",
          minWidth: 150,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "仓位类型",
          key: "warehouseType",
          minWidth: 150,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "是否冻结",
          key: "warehouseFrozen",
          minWidth: 100,
          align: "center",
          resizable: true,
          tooltip: true,
          render: (h, params) => {
            return h('div', params.row.warehouseFrozen ? '是' : '否');
          }
        },
        {
          title: "操作",
          slot: "action",
          fixed: "right",
          width: 180,
          align: "center",
        },
      ],
      columns1: [
        {
          title: '序号',
          width: 80,
          align: 'center',
          render: (h, params) => {
            return h('span', params.index + (this.pageNum - 1) * this.pageSize + 1);
          },
        },
        {
          title: "储位名称",
          key: "storageName",
          minWidth: 150,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "储位编码",
          key: "storageCode",
          minWidth: 150,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "仓位名称",
          key: "warehouseName",
          minWidth: 150,
          align: "center",
          resizable: true,
        },
        {
          title: "仓位编码",
          key: "warehouseCode",
          minWidth: 150,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "储位类型",
          key: "storageType",
          minWidth: 150,
          align: "center",
          resizable: true,
          tooltip: true
        },
        {
          title: "是否冻结",
          key: "warehouseFrozen",
          minWidth: 100,
          align: "center",
          resizable: true,
          tooltip: true,
          render: (h, params) => {
            return h('div', params.row.storageFrozen ? '是' : '否');
          }
        }, {
          title: "操作",
          slot: "action",
          fixed: "right",
          width: 180,
          align: "center",
        },
      ],
      moldCode: "",
      id: "",
      typeList: [
        {
          value: "true",
          label: '是'
        },
        {
          value: "false",
          label: '否'
        }
      ],
      loading: false,
      loading1: false,
      loading2: false,
      // 一级二级弹窗显示
      create: false,
      createLink: false,
      //三级搜索参数
      searchParams: {},
      searchParams1: {},
      searchParams2: {},
      //一级页面分页参数
      pageNum: 1,
      pageSize: 10,
      total: 0,
      bomDetail: false,
      delFaultCodeShowF: false, //是否显示删除弹窗
      pageSizeOption: [10, 20, 30, 40],
      delIds: [],
      delIds1: [],
      delIds2: [],
      selection: [],
      createByOptions: []
    };
  },
  computed: {
    tableHeight() {
      return window.innerHeight - 300;
    },
  },
  mounted() {
    this.getTableColumnsWidth(this.columns);
    this.searchList();
  },
  methods: {
    // 右侧编辑
    handleEditRowStorage(row) {
      const list = JSON.parse(JSON.stringify(row))
      list.storageFrozen = list.storageFrozen.toString()
      this.storageForm = list;
      this.storageCreateStatus = true;
    },
    // 右侧 点击删除
    handleDeleteRowStorage(row) {
      this.currentItem = row;
      this.deleteShowStorage = true;
    },
    // 左侧点击编辑
    handleEditRow(row) {
      console.log(row, 'czq')
      const list = JSON.parse(JSON.stringify(row))
      list.warehouseFrozen = list.warehouseFrozen.toString()
      this.wareForm = list
      this.createStatus = true;
    },
    // 左侧 仓储点击删除
    handleDeleteRow(row) {
      this.currentItem = row;
      this.deleteShow = true;
    },
    // 右侧 删除方法
    handleDeleteSureStorage() {
      this.axios({
        method: "DELETE",
        url: "/api/basedataStorage/delete",
        data: {ids: [this.currentItem.id]},
      }).then((res) => {
        if (res.code === 200) {
          this.currentItem = {};
          this.deleteShowStorage = false;
          this.searchStorage();
        } else {
          this.$Message.warning(res.message);
        }
      });
    },
    // 左侧 删除方法
    handleDeleteSure() {
      this.axios({
        method: "DELETE",
        url: "/api/basedataWarehouse/delete",
        data: {ids: [this.currentItem.id]},
      }).then((res) => {
        if (res.code === 200) {
          this.currentItem = {};
          this.deleteShow = false;
          this.searchList();
        } else {
          this.$Message.warning(res.message);
        }
      });
    },
    closeSubmit() {
      this.createStatus = false;
    },
    closeSubmitStorages() {
      this.storageCreateStatus = false;
    },
    // 右侧编辑
    handleAddSubmitStorages() {
      if (this.storageForm.id) {
        this.axios
            .put("/api/basedataStorage/update", this.storageForm)
            .then((res) => {
              if (res.code !== 200) {
                this.$Message.warning(res.message);
                return false
              }
              this.storageCreateStatus = false;
              this.searchStorage();
            })
            .catch((error) => {
              console.error("Error submitting form:", error);
            });
      } else {
        this.axios
            .post("/api/basedataStorage/save", this.storageForm)
            .then((res) => {
              if (res.code !== 200) {
                this.$Message.warning(res.message);
                return false
              }
              this.storageCreateStatus = false;
              this.searchStorage();
            })
            .catch((error) => {
              console.error("Error submitting form:", error);
            });
      }
    },
    handleAddSubmit() {
      // 左侧编辑
      if (this.wareForm.id) {
        this.axios
            .put("/api/basedataWarehouse/update", this.wareForm)
            .then((res) => {
              if (res.code !== 200) {
                this.$Message.warning(res.message);
                return false
              }

              this.createStatus = false;
              this.searchList();
            })
            .catch((error) => {
              console.error("Error submitting form:", error);
            });
      } else {
        // 左侧新增
        this.axios
            .post("/api/basedataWarehouse/save", this.wareForm)
            .then((res) => {
              if (res.code !== 200) {
                this.$Message.warning(res.message);
                return false
              }
              this.createStatus = false;
              this.searchList();
            })
            .catch((error) => {
              console.error("Error submitting form:", error);
            });
      }
    },
    // 左侧单击行
    handleRowClick(item) {
      this.rowInfo = item
      this.axios
          .post("/api/basedataStorage/listByPojoPage", {
            warehouseId: item.id, ...this.pageSearch
          })
          .then((res) => {
            if (res.code !== 200) {
              this.$Message.warning(res.message);
              return false
            }
            const list = JSON.parse(JSON.stringify(res.data.records))
            for (const item of list) {
              item.warehouseName = this.rowInfo.warehouseName
              item.warehouseCode = this.rowInfo.warehouseCode
            }
            this.storageList = list
            this.total = res.data.total
          })
          .catch((error) => {
            console.error("Error submitting form:", error);
          });

      // 这里可以进行其他操作，比如将row数据传递给父组件
      // this.$emit('row-selected', row);
    },
    handleAdd() {
      this.wareForm = {};
      this.createStatus = true;
    },
    handleAddStorage() {
      if (this.rowInfo.id)
        this.storageForm = {
          warehouseId: this.rowInfo.id
        };
      this.storageCreateStatus = true;
    },
    getSearch(arg) {
      this.searchParams = JSON.parse(JSON.stringify(arg[0]));
      const {functionalLocationString} = this.searchParams;
      if (functionalLocationString && functionalLocationString.length != 0) {
        this.searchParams.functionalLocationString = functionalLocationString.at(-1);
      } else delete this.searchParams.functionalLocationString
      this.changeNum();
    },
    reset() {
      this.searchParams = {};
      this.changeNum();
    },
    //分页
    changeNum() {
      this.pageNum = 1;
      this.searchList();
    },
    changePageSize(val) {
      this.pageSearch.pageSize = val;
      this.searchStorage();
    },
    changePageNum(val) {
      this.pageSearch.current = val;
      this.searchStorage();
    },
    searchStorage() {
      // this.rowInfo = row
      this.axios
          .post("/api/basedataStorage/listByPojoPage", {
            warehouseId: this.rowInfo.id, ...this.pageSearch
          })
          .then((res) => {
            if (res.code !== 200) {
              this.$Message.warning(res.message);
              return false
            }
            const list = JSON.parse(JSON.stringify(res.data.records))
            for (const item of list) {
              item.warehouseName = this.rowInfo.warehouseName
              item.warehouseCode = this.rowInfo.warehouseCode
            }
            this.storageList = list
            this.total = res.data.total
          })
    },

    //查询列表
    searchList() {
      getWare('').then(res => {
        if (res.code === 200) {
          this.wareList = res.data;
          if (res.data && res.data.length > 0) {
            const list = []
            for (const item of res.data) {
              list.push(
                  {
                    label: item.warehouseCode,
                    value: item.id
                  }
              )
            }
            this.wareCodeList = list
            this.handleRowClick(res.data[0])
          }
        } else {
          this.$Message.warning({
            content: res.message,
            duration: 6,
            closable: true
          });
        }
      });

      let params = {
        pageNum: this.pageNum,
        pageSize: this.pageSize,
        devicesNumber: this.searchParams.devicesNumber || "2"
      };
      for (let key in this.searchParams
          ) {
        if (this.searchParams[key]) {
          this.$set(params, key, this.searchParams[key]);
        }
      }
    },
//批量删除
    delRowBetch() {
      if (this.delIds1.length == 0) {
        this.$Message.warning({
          content: `${this.$t("common.deleteItems")}`,
          duration: 6,
          closable: true
        });
        return;
      } else {
        this.delFaultCodeShowF = true;
      }
    }
    ,
//删除
    delRow(row) {
      //点击展示提示删除弹窗
      this.delFaultCodeShowF = true;
      this.delIds1 = [];
      this.delIds1.push(row.id);
    }
    ,
  }
}
;
</script>

<style scoped lang="scss">
.btn-box {
  padding: 8px 5px !important;
}

.flexTable {
  display: flex;
}

.table-div-body {
  width: 50%;
}

.wareTree {
  width: 100%;
  overflow: auto;

  .wareLoop {
    padding: 10px 15px;
    cursor: default;
    border-radius: 10px;
    margin-bottom: 5px;

    .wareBody {
      font-size: 22px;
      display: flex;
      align-items: center;
      justify-content: space-between;
    }
  }

  .wareLoop:hover {
    background-color: #E0EAF9;
    cursor: pointer;
  }

}
</style>
